<template>
  <aside
    :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]"
  >
    <div class="aui-sidebar__inner">
      <el-menu
        :default-active="$store.state.sidebarMenuActiveName"
        :collapse="$store.state.sidebarFold"
        :unique-opened="true"
        :collapseTransition="false"
        @select="select"
        class="aui-sidebar__menu"
      >
        <sub-menu
          v-for="menu in $store.state.sidebarMenuList"
          :key="menu.id"
          :menu="menu"
          :select="
            selectId == '' ? $store.state.sidebarMenuActiveName : selectId
          "
        />
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from "./main-sidebar-sub-menu";
export default {
  data() {
    return {
      selectId: "",
    };
  },
  components: {
    SubMenu,
  },
  created() {
    this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
  },
  methods: {
    select(ev) {
      this.selectId = ev;
      console.log(
        ev,
        this.$store.state.sidebarMenuActiveName,
        this.$store.state.sidebarMenuList
      );
    },
  },
};
</script>
